<template>
	<view>
		<view :prop="listenData" :change:prop="klinecharts.listenChange"></view>
		<view class="uni-button-group">
			<button class="uni-button" @click="klinecharts.switchDay" @touchstart="klinecharts.switchDay" style="width: 100px;">日K</button>
			<button class="uni-button" @click="klinecharts.switchWeek" @touchstart="klinecharts.switchWeek" style="width: 100px;">周K</button>
			<button class="uni-button" @click="klinecharts.switchMonth" @touchstart="klinecharts.switchMonth" style="width: 100px;">月K</button>
			<button class="uni-button" @click="klinecharts.switchQuarter" @touchstart="klinecharts.switchQuarter" style="width: 100px;">季K</button>
			<button class="uni-button" @click="klinecharts.switchYear" @touchstart="klinecharts.switchYear" style="width: 100px;">年K</button>
		</view>
		<view id="k-line-chart" class="content"></view>
	</view>
</template>

<script>
	import {getHistoryPriceByStockCode} from '@/api/eye/stockPrice.js'
	export default {
		data() {
			return {
				listenData: null,
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.stockName
			});
			console.log('onload方式一获取参数:')
			console.log(options)
			getHistoryPriceByStockCode(options.stockCode).then(res => {
				console.log('##############################')
				console.log(res.msg)
				this.listenData = res
			}).catch((e) => {
				console.log('加载出错了..................................')
				console.log(e)
			})
		},
		methods: {
		},
	}
</script>

<script module="klinecharts" lang="renderjs">
	import {init} from 'klinecharts'
	import dayjs from 'dayjs'
	import weekday from "dayjs/plugin/weekday"
	import quarterOfYear from "dayjs/plugin/quarterOfYear"
	import "dayjs/locale/zh-cn"
	dayjs.extend(weekday)
	dayjs.extend(quarterOfYear)
	dayjs.locale('zh-cn')
	import styleOptions from './k-line-style-options.js'
	export default {
		data() {
			return {
				chart:  null,
				dayDate: [],
				dayPrice: [],
				dayKLineData:[]
			}
		},
		mounted: function() {
			this.chart = init('k-line-chart')
			this.chart.setStyleOptions(styleOptions())
			this.chart.overrideTechnicalIndicator({name: 'MA',calcParams: [5, 10, 20, 30, 60, 125, 250]})
			this.chart.createTechnicalIndicator('MA', false, {id: 'candle_pane'})
			// chart.createTechnicalIndicator('VOL', false, {height: 120,dragEnabled: false})
			this.chart.createTechnicalIndicator('KDJ', false, {height: 120,dragEnabled: false})
			this.chart.createTechnicalIndicator('MACD', false, {height: 120,dragEnabled: false})
			this.chart.createTechnicalIndicator('BOLL', false, {height: 120,dragEnabled: false})
			this.chart.createTechnicalIndicator('SAR', false, {height: 120,dragEnabled: false})
			this.chart.createTechnicalIndicator('BBI', false, {height: 120,dragEnabled: false})
			this.chart.createTechnicalIndicator('DMI', false, {height: 120,dragEnabled: false})
			this.chart.createTechnicalIndicator('RSI', false, {height: 120,dragEnabled: false})
		},
		methods: {
			switchDay(){
				console.log('点击天')
				this.generateChartData('day')
			},
			switchWeek(e, ownerInstance) {
				console.log('点击周')
				this.generateChartData('week')
			},
			switchMonth(){
				this.generateChartData('month')
			},
			switchQuarter(){
				this.generateChartData('quarter')
			},
			switchYear(){
				this.generateChartData('year')
			},
			generateChartData(type){
					var d = this.dayDate
					var price = this.dayKLineData
					let length = d.length
					let date = new Date(d[0])
					//第一天
					let firstDay = dayjs(date).startOf(type)
					//最后一天
					let lastDay = dayjs(date).endOf(type)
					
					let  kLineItem = {}
					let  kLine = []
					let open=0,close=0,high=0,low=0
					
					let tmp = []
					for(let n=0;n<length;n++){
						if(new Date(d[n]) >= firstDay && new Date(d[n]) <= lastDay){
							tmp.push(price[n])
						} else {
							if(tmp.length > 0){
								kLine.push({timestamp:tmp[tmp.length-1].timestamp,open: tmp[0].open,
									close: tmp[tmp.length-1].close, 
									low: Math.min.apply(Math,tmp.map(item => { return item.low })), 
									high: Math.max.apply(Math,tmp.map(item => { return item.high }))})
								date = new Date(d[n])
								//第一天
								firstDay = dayjs(date).startOf(type)
								//最后一天
								lastDay = dayjs(date).endOf(type)
							}
							tmp = []
							tmp.push(price[n])
						}
					}
					
					// 添加最后的数据
					if(tmp.length > 0){
						kLine.push({timestamp:tmp[tmp.length-1].timestamp,open: tmp[0].open,
							close: tmp[tmp.length-1].close, 
							low: Math.min.apply(Math,tmp.map(item => { return item.low })), 
							high: Math.max.apply(Math,tmp.map(item => { return item.high }))})
					}
					this.chart.applyNewData(kLine)
			},
			// 监听数据传给renderjs
			listenChange(newValue, oldValue, ower, instance) {
				console.log('监听到数据变化啦(*^_^*)')
				console.log("new:" + newValue)
				console.log("old:" + oldValue)
				console.log(ower)
				console.log(instance)
				if (newValue != undefined) {
					this.dayDate = newValue.data.date
					this.dayPrice = newValue.data.price
					
					let kLineData = []
					for (let i = 0; i < this.dayDate.length; i++) {
						let item = {}
						item.open = this.dayPrice[i][0]
						item.close = this.dayPrice[i][1]
						item.low = this.dayPrice[i][2]
						item.high = this.dayPrice[i][3]
						// item.volume = 成交量
						// item.turnover = 成交额
						item.timestamp = new Date(this.dayDate[i]).getTime()
						kLineData.push(item)
					}
					this.dayKLineData = kLineData
					this.chart.applyNewData(kLineData)
				}
			}
		}
	}
</script>

<style>
	.content {
		height: 1200px;
	}
</style>
